<!--
 * @Author: fisher
 * @Date: 2023-04-04 15:03:14
 * @LastEditTime: 2023-09-12 15:40:57
 * @LastEditors: fisher
 * @Description: sunshine
 * @FilePath: \front-end-template\src\modules\Digital\layouts\toolBar\panel\components\tools3d\components\sunshine.vue
-->
<template>
  <div class="panel">
    <div class="panel_title">日照分析</div>
    <div class="form">
      <div class="form_item">
        <span>日期选择：</span>
        <el-date-picker v-model="currentDate" class="select" type="date" placeholder="选择日期" />
      </div>
      <div class="form_item">
        <span>开始时间：</span>
        <el-select v-model="startTime" class="select" placeholder="请选择">
          <el-option
            v-for="item in startTimeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="form_item">
        <span>结束时间：</span>
        <el-select v-model="endTime" class="select" placeholder="请选择">
          <el-option
            v-for="item in endTimeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="form_item">
        <span>底部高程：</span>
        <input v-model="bottom" type="text" placeholder="请输入" />
      </div>
      <div class="form_item">
        <span>拉伸高度：</span>
        <input v-model="extend" type="text" placeholder="请输入" />
      </div>
    </div>
    <div class="panel_operate">
      <div @click="analysis">阴影分析</div>
      <div @click="sunshine">日照效果</div>
      <div @click="clear">清除</div>
      <div @click="exit">退出</div>
    </div>
    <div class="legend">
      <div class="legend_item">
        <span style="background: #fe0000; border-radius: 4px 4px 0 0" />
        <span>100%</span>
      </div>
      <div class="legend_item">
        <span style="background: #ffff00" />
        <span>75%</span>
      </div>
      <div class="legend_item">
        <span style="background: #00ff01" />
        <span>50%</span>
      </div>
      <div class="legend_item">
        <span style="background: #01ffff" />
        <span>25%</span>
      </div>
      <div class="legend_item">
        <span style="background: #0000fe" />
        <span>0%</span>
      </div>
      <div class="legend_item">日照率</div>
    </div>
  </div>
</template>
  
  <script>
/* eslint-disable */
let handlerPolygon,
  layers,
  shadowQuery,
  points = [],
  markedPoints = [];
export default {
  components: {},
  data() {
    return {
      currentDate: new Date(),
      startTime: 8,
      endTime: 16,
      bottom: 2,
      extend: 200,
      analysisStatus: false
    };
  },
  computed: {
    startTimeOptions() {
      const res = [];
      for (let i = 0; i < 24; i += 2) {
        res.push({
          value: i,
          label: i + ":00"
        });
      }
      return res;
    },
    endTimeOptions() {
      const res = [];
      for (let i = 2; i < 26; i += 2) {
        res.push({
          value: i,
          label: i + ":00"
        });
      }
      return res;
    }
  },
  mounted() {
    // this.init();
    console.log('子组件mounted');
    this.$nextTick(()=>{
      console.log('dsbfd大大',viewer);
    })
  },
  destroyed() {
    // shadowQuery.destroy();
    shadowQuery = undefined;
    layers = undefined;
  },
  methods: {
    init() {
      viewer.shadows = true;
      layers = [...scene.layers.layerQueue];
      layers.forEach(item => {
        item.selectEnabled = false;
        item.shadowType = 2;
      });
      //创建阴影查询对象
      if (!shadowQuery) {
        shadowQuery = new Cesium.ShadowQueryPoints(scene);
        shadowQuery.build();
      }
      let that = this;
      this.setCurrentTime();
      //   设置画取范围对象,并初始化方法
      handlerPolygon = new Cesium.DrawHandler(
        viewer,
        Cesium.DrawMode.Polygon,
        0
      );
      handlerPolygon.activeEvt.addEventListener(function(isActive) {
        if (isActive == true) {
          viewer.enableCursorStyle = false;
          viewer._element.style.cursor = "";
        } else {
          viewer.enableCursorStyle = true;
        }
      });
      handlerPolygon.movingEvt.addEventListener(function(windowPosition) {
        if (handlerPolygon.isDrawing) {
          //   tooltip.showAt(
          //     windowPosition,
          //     "<p>绘制阴影分析区域(右键结束绘制)</p>"
          //   );
        }
      });
      handlerPolygon.drawEvt.addEventListener(function(result) {
        // tooltip.setVisible(false);
        points.length = 0;
        var polygon = result.object;
        if (!polygon) {
          return;
        }
        polygon.show = false;
        handlerPolygon.polyline.show = false;
        var positions = [].concat(polygon.positions);
        positions = Cesium.arrayRemoveDuplicates(
          positions,
          Cesium.Cartesian3.equalsEpsilon
        );

        //遍历多边形，取出所有点
        for (var i = 0, len = positions.length; i < len; i++) {
          //转化为经纬度，并加入至临时数组
          var cartographic = Cesium.Cartographic.fromCartesian(
            polygon.positions[i]
          );
          var longitude = Cesium.Math.toDegrees(cartographic.longitude);
          var latitude = Cesium.Math.toDegrees(cartographic.latitude);
          points.push(longitude);
          points.push(latitude);
        }
        //设置分析对象的开始结束时间
        var dateValue = that.currentDate;
        //  var dateValue = "2017-05-13";
        var startTime = new Date(dateValue);
        startTime.setHours(parseInt(that.startTime));
        // startTime.setHours(8);
        shadowQuery.startTime = Cesium.JulianDate.fromDate(startTime);

        var endTime = new Date(dateValue);
        endTime.setHours(parseInt(that.endTime));
        // endTime.setHours(17);
        shadowQuery.endTime = Cesium.JulianDate.fromDate(endTime);

        //设置当前时间
        that.setCurrentTime();

        shadowQuery.spacing = 15;
        shadowQuery.timeInterval = 60;
        //设置分析区域、底部高程和拉伸高度
        shadowQuery.qureyRegion({
          position: points,
          bottom: parseFloat(that.bottom),
          extend: parseFloat(that.extend)
        });
        const res = shadowQuery.build();
        console.log(res);
      });
    },
    setCurrentTime() {
      var endTime = new Date(this.currentDate);
      endTime.setHours(parseInt(this.endTime));
      viewer.clock.currentTime = Cesium.JulianDate.fromDate(endTime);
      viewer.clock.multiplier = 1;
      viewer.clock.shouldAnimate = true;
    },
    clearmarkedPoints() {
      for (let i = 0; i < markedPoints.length; i++) {
        viewer.entities.remove(markedPoints[i]);
      }
      markedPoints.length = 0;
    },
    analysis() {
      console.log(this.startTime, this.endTime, this.bottom, this.extend);
      if (this.analysisStatus) {
        this.$notify.warning({
          title: "消息",
          message: "请先清除当前分析结果！"
        });
        return false;
      }
      handlerPolygon.deactivate();
      handlerPolygon.activate();
      this.analysisStatus = true;
    },
    sunshine() {
      viewer.shadowMap.maximumDistance = 10000;
      viewer.shadows = true;
      viewer.scene.globe.enableLighting = true;
      viewer.terrainShadows = Cesium.ShadowMode.RECEIVE_ONLY;
      viewer.shadowMap.darkness = 0.5;
      var dateVal = this.currentDate;
      var startTime = new Date(dateVal);
      var shour = parseInt(this.startTime);
      var ehour = parseInt(this.endTime);

      if (shour > ehour) {
        return;
      }
      var nTimer = 0.0;
      var nIntervId = setInterval(function() {
        if (shour < ehour) {
          startTime.setHours(shour);
          startTime.setMinutes(nTimer);
          viewer.clock.currentTime = Cesium.JulianDate.fromDate(startTime);
          nTimer += 10.0;
          if (nTimer > 60.0) {
            shour += 1.0;
            nTimer = 0.0;
          }
        } else {
          clearInterval(nIntervId);
          viewer.scene.globe.enableLighting = false;
          viewer.shadowMap.maximumDistance = 1000;
        }
      }, 100);
    },
    clear() {
      this.clearmarkedPoints();
      handlerPolygon.deactivate();
      if (handlerPolygon.polygon) handlerPolygon.polygon.show = false;
      if (handlerPolygon.polyline) handlerPolygon.polyline.show = false;
      shadowQuery.clear();
      points.length = 0;
      this.analysisStatus = false;
    },
    exit() {
      //   this.clear();
      viewer.shadows = false;
      viewer.terrainShadows = Cesium.ShadowMode.DISABLED
      this.$parent.sunshineVisible = false;
      viewer.scene.globe.enableLighting = false;
      viewer.shadowMap.maximumDistance = 1000;
      //   this.$store.commit("updateTools3dStatus", false);
      //   this.$store.commit("updateTools3dType", null);
    }
  }
};
</script>
  
  <style lang="less" scoped>
.panel {
  width: 400px;
  height: 400px;
  background: #fff;
  border-radius: 5px;
  padding: 15px 22px;
  position: absolute;
  bottom: 3vh;
  left: 5vw;
  box-sizing: border-box;
  &_title {
    font-size: 14px;
    font-weight: bold;
    color: #333333;
  }
  &_operate {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    div {
      background: #3aa6f4;
      border-radius: 4px 4px 4px 4px;
      padding: 9px 16px;
      font-size: 14px;
      cursor: pointer;
      color: #ffffff;
    }
  }
}
.form {
  margin-top: 20px;
  width: 100%;
  &_item {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 10px;

    span {
      flex-basis: 80px;
      font-size: 14px;
      color: #666666;
    }
    input {
      outline: none;
      width: 272px;
      height: 40px;
      background: #ffffff;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #dddddd;
      padding-left: 16px;
      font-size: 14px;
      color: #555555;
    }
    input::-webkit-input-placeholder {
      // 这里写placeholder的样式

      color: #ccc;
    }
    .select {
      width: 272px;
      height: 40px;
    }
  }
}
.legend {
  position: absolute;
  right: -86px;
  bottom: 0;
  width: 66px;

  &_item {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: bold;
    color: #ffffff;
    span:nth-child(1) {
      width: 16px;
      height: 100%;
    }
    span:nth-child(2) {
      flex: 1;
      text-align: left;
      padding-left: 10px;
    }
  }
}
</style>